<template>
  <div id="app">
    <!-- 星星特效canvas容器 -->
    <div ref="starCanvas"></div>
    <!-- 路由视图 -->
    <router-view />
  </div>
</template>

<script>
import BottomNav from '@/views/BottomNav.vue';

export default {
  name: "App",
  components: {
    BottomNav // 注册 BottomNav 组件
  },
  data() {
    return {
      starCleanup: null,
    };
  },
  mounted() {
    this.initStarEffect();
  },
  beforeDestroy() {
    this.cleanupStarEffect();
  },
  methods: {
    initStarEffect() {
      const cleanupFunctions = [];
      const canvas = document.createElement('canvas');
      this.$refs.starCanvas.appendChild(canvas);
      const ctx = canvas.getContext("2d");
      
      const colours = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"];
      let arr = [];
      let timeoutList = [];

      const resizeCanvas = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      };

      resizeCanvas();

      canvas.style.cssText = `
        position: fixed;
        z-index: 0;
        top: 0;
        left: 0;
        pointer-events: none;
      `;

      const star = (x, y, r, l, rot) => {
        ctx.beginPath();
        for (let i = 0; i < 5; i++) {
          ctx.lineTo(
            Math.cos(((18 + i * 72 - rot) * Math.PI) / 180) * r + x,
            -Math.sin(((18 + i * 72 - rot) * Math.PI) / 180) * r + y
          );
          ctx.lineTo(
            Math.cos(((54 + i * 72 - rot) * Math.PI) / 180) * l + x,
            -Math.sin(((54 + i * 72 - rot) * Math.PI) / 180) * l + y
          );
        }
        ctx.closePath();
      };

      const addStarts = (e) => {
        arr.push({
          x: e.clientX,
          y: e.clientY,
          r: Math.random() * 0.5 + 1.5,
          td: Math.random() * 4 - 2,
          dx: Math.random() * 2 - 1,
          dy: Math.random() * 1 + 1,
          rot: Math.random() * 90 + 90,
          color: colours[Math.floor(Math.random() * colours.length)],
        });
      };

      const draw = () => {
        arr.forEach(temp => {
          star(temp.x, temp.y, temp.r, temp.r * 3, temp.rot);
          ctx.fillStyle = temp.color;
          ctx.strokeStyle = temp.color;
          ctx.lineWidth = 0.1;
          ctx.lineJoin = "round";
          ctx.fill();
          ctx.stroke();
        });
      };

      const update = () => {
        arr.forEach((temp, index) => {
          temp.x += temp.dx;
          temp.y += temp.dy;
          temp.rot += temp.td;
          temp.r -= 0.015;
          if (temp.r < 0) arr.splice(index, 1);
        });
      };

      const mousemoveHandler = (e) => {
        addStarts(e);
        for (let index = 0; index < 200; index++) {
          if (index === 0 && timeoutList.length > 0) {
            timeoutList.forEach(clearTimeout);
            timeoutList = [];
          }
          timeoutList[index] = setTimeout(() => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
            update();
          }, index * 20);
        }
      };

      window.addEventListener("mousemove", mousemoveHandler);
      window.addEventListener("resize", resizeCanvas);

      cleanupFunctions.push(() => {
        window.removeEventListener("mousemove", mousemoveHandler);
        window.removeEventListener("resize", resizeCanvas);
        this.$refs.starCanvas.removeChild(canvas);
        timeoutList.forEach(clearTimeout);
      });

      this.starCleanup = () => cleanupFunctions.forEach(fn => fn());
    },
    cleanupStarEffect() {
      if (this.starCleanup) {
        this.starCleanup();
      }
    },
    goToPage(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
/* 全局基础样式 */
#app {
  position: relative;
  z-index: 1;
}

#starCanvas {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>
